<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title>PrimeFaces Venture Promotional Landing Page</title>
        <h:outputScript library="venture-layout" name="js/nanoscroller.js"/>
        <h:outputScript library="venture-layout" name="js/layout.js"/>
        <h:outputScript name="js/locales_zh.js"/>
    </h:head>
    <h:body class="PopupMenu AquaTopbar DarkPurpleBG">
        <h:outputStylesheet library="venture-layout" name="css/core-layout.css"/>
        <h:outputStylesheet library="venture-layout" name="css/animate.css"/>
        <h:outputStylesheet library="venture-layout" name="css/nanoscroller.css"/>
        <h:outputStylesheet library="venture-layout" name="css/venture-font.css"/>
        <h:outputStylesheet library="venture-layout" name="css/venture-layout.css"/>

        <div id="layout-topbar-cover">
            <div id="layout-topbar-row">
                <div id="layout-topbar-left">
                    <a id="mobile-menu-btn" class="topbar-link Animated03"><i class="fa fa-navicon"/></a>
                    <a href="#" id="logo">
                        <img id="logo" src="#{resource['venture-layout:images/logo.svg']}" />
                    </a>
                </div>
                <div id="layout-topbar-right">

                    <a id="" class="topbar-link Animated03 Fright"><i class="icon-location"/></a>
                    <a id="" class="topbar-link Animated03 Fright"><i class="icon-user"/></a>

                </div>
            </div>
        </div>

        <!-- LAYOUT CONTAINER -->

        <div id="layout-container">
            <div id="layout-container-row">

                <!-- LAYOUT MENU COVER -->
                <div id="layout-menu-cover" class="nano Animated03">
                    <div id="layout-menu-cover-scroll-content" class="nano-content">

    <ul id="layout-menu" class="layout-tab-submenu active">
        <li><a href="#" class="active" rel="main-links"> <i class="icon-nine18"/> <span class="layout-tab-menu-link-text"><span></span></span> </a>
            <ul>
                <li><a href="dashboard-social.xhtml" rel="highlight"> <i class="icon-chevron-right"/> <span class="layout-tab-menu-link-text"><span></span> Go Dashboard</span> </a></li>
                <li><a href="#highlight" rel="highlight"> <i class="icon-chevron-right"/> <span class="layout-tab-menu-link-text"><span></span> Home</span> </a></li>
                <li><a href="#customers" rel="customers"> <i class="icon-chevron-right"/> <span class="layout-tab-menu-link-text"><span></span> Customers</span> </a></li>
                <li><a href="#features" rel="features"> <i class="icon-chevron-right"/> <span class="layout-tab-menu-link-text"><span></span> Features</span> </a></li>
                <li><a href="#pricingtables" rel="pricingtables"> <i class="icon-chevron-right"/> <span class="layout-tab-menu-link-text"><span></span> Pricing Tables</span> </a></li>
            </ul>
        </li>
    </ul>

                    </div>
                </div>

                <!-- Content Start-->

                <div class="Wid100 OvHidden AquaBack" id="highlight" style="padding:15rem 0px;">
                    <div class="Wid80 MarAuto TexAlCenter">
                        <img src="#{resource['demo:images/rocket.svg']}" style="height:25rem;" class="MarAuto"/>
                        <div class="EmptyBox20"/>
                        <span class="DispBlock TexAlCenter FontEnriquetaRegular White Fs50">Your Application Slogan Comes Here</span>
                        <div class="EmptyBox20"/>
                        <span class="DispBlock TexAlCenter FontPoppinsRegular White Fs20 Opac70"> You can use this page as a promotion page template for your application. <br /> So your web application and promotion website of application will work in complete harmony.</span>
                        <div class="EmptyBox20"/>
                        <div class="Wid50 MarAuto ui-fluid" id="highlight-buttons">
                            <div class="Container50 Responsive100">
                                    <p:commandButton type="button" value="Sign Up Now" styleClass="RedButton"/>
                            </div>
                            <div class="Container50 Responsive100">
                                    <p:commandButton type="button" value="More Info" styleClass="PurpleButton"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="Container100 NoIndent" id="customers" style="padding:12rem 7rem;">

                    <h1 class="FontEnriquetaRegular Fs30 White TexAlCenter">Hundreds Of Thousands Of Customers Trust Us !</h1>
                    <div class="EmptyBox30"/>
                    <div class="Wid70 MarAuto">
                        <div class="Container33 Responsive50">
                            <div class="Container100 TexAlCenter">
                                <div class="EmptyBox20"/>
                                <i class="icon-heart Fs60 Aqua"/>
                                <div class="EmptyBox20"/>
                                <span class="DispBlock White FontPoppinsRegular">"We realized Venture was a great tool that would give us more insights
                                    on both a strategic and technical level, so we could make more intelligent business decisions."</span>
                                <div class="EmptyBox20"/>
                                <span class="FontEnriquetaRegular White Opac70 DispBlock">—Luke Skywalker, Vice President of Operations</span>
                            </div>
                        </div>
                        <div class="Container33 Responsive50">
                            <div class="Container100 TexAlCenter">
                                <div class="EmptyBox20"/>
                                <i class="icon-heart Fs60 Aqua"/>
                                <div class="EmptyBox20"/>
                                <span class="DispBlock White FontPoppinsRegular">"We realized Venture was a great tool that would give us more insights
                                    on both a strategic and technical level, so we could make more intelligent business decisions."</span>
                                <div class="EmptyBox20"/>
                                <span class="FontEnriquetaRegular White Opac70 DispBlock">—Luke Skywalker, Vice President of Operations</span>
                            </div>
                        </div>
                        <div class="Container33 Responsive50">
                            <div class="Container100 TexAlCenter">
                                <div class="EmptyBox20"/>
                                <i class="icon-heart Fs60 Aqua"/>
                                <div class="EmptyBox20"/>
                                <span class="DispBlock White FontPoppinsRegular">"We realized Venture was a great tool that would give us more insights
                                    on both a strategic and technical level, so we could make more intelligent business decisions."</span>
                                <div class="EmptyBox20"/>
                                <span class="FontEnriquetaRegular White Opac70 DispBlock">—Luke Skywalker, Vice President of Operations</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="Container100 NoIndent YellowBack" id="features" style="padding:12rem 3rem;">
                    <h1 class="FontEnriquetaRegular Fs30 Black TexAlCenter">Features</h1>
                    <div class="EmptyBox30"/>
                    <div class="Wid90 MarAuto Flex FlexWrap">

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-gear Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">HTML5 &amp; CSS3</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-rocket Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">Cross-Browser</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-graduation Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">Responsive</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-heart Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">Handcrafted</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-jewel Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">Rock-Solid</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-gear Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">HTML5 &amp; CSS3</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-rocket Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">Cross-Browser</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-graduation Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">Responsive</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-heart Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">Handcrafted</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>

                        <div class="Container20 Responsive TexAlCenter Flex">
                            <div class="Container100">
                                <i class="icon-jewel Red Wid100" style="font-size:5rem;"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="FontPoppinsSemiBold Black" style="font-size:1.6rem;">Rock-Solid</div>
                                <div class="Wid100 OvHidden" style="height:1rem;"></div>
                                <div class="FontPoppinsRegular Leaden Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                                <div class="Wid100 OvHidden" style="height:3rem;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="Container100 NoIndent" id="pricingtables" style="background-color:#F0F2F5; padding:10rem 3rem;">
                    <h1 class="FontEnriquetaRegular Fs30 Leaden TexAlCenter">Pricing Tables</h1>
                    <div class="EmptyBox30"/>
                    <div class="Wid90 MarAuto Responsive100 Flex FlexWrap">
                        <div class="Container25 TexAlCenter Responsive50 Flex">
                            <div class="Card Zoom1point05x">
                                <div class="Container100 FontPoppinsSemiBold Leaden" style="font-size:1.4rem;">Standard</div>
                                <div class="Separator"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="Container100 FontPoppinsRegular Leaden" style="font-size:3rem;">$2<span class="Fs30 Leaden">/mo*</span></div>
                                <div class="Container100 FontPoppinsRegular Leaden Fs16">Basic customer support for<br /> small business</div>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="Separator"/>
                                <div class="Container100 FontPoppinsRegular Leaden Fs16">$25 for monthly</div>
                                <div class="Container100 ui-fluid">
                                    <p:button value="Get Started" outcome="/promotion-page.xhtml" styleClass="GreenButton Fleft"/>
                                </div>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                            </div>
                        </div>

                        <div class="Container25 TexAlCenter Responsive50 Flex">
                            <div class="Card Zoom1point05x">
                                <div class="Container100 FontPoppinsSemiBold Orange" style="font-size:1.4rem;">Pro</div>
                                <div class="Separator"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="Container100 FontPoppinsRegular Leaden" style="font-size:3rem;">$3<span class="Fs30 Leaden">/mo*</span></div>
                                <div class="Container100 FontPoppinsRegular Leaden Fs16">All-in-one customer support<br /> for small business</div>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="Separator"/>
                                <div class="Container100 FontPoppinsRegular Leaden Fs16">$35 for monthly</div>
                                <div class="Container100 ui-fluid">
                                    <p:button value="Get Started" outcome="/promotion-page.xhtml" styleClass="OrangeButton Fleft"/>
                                </div>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                            </div>
                        </div>

                        <div class="Container25 TexAlCenter Responsive50 Flex">
                            <div class="Card Zoom1point05x">
                                <div class="Container100 FontPoppinsSemiBold Leaden" style="font-size:1.4rem;">Business</div>
                                <div class="Separator"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="Container100 FontPoppinsRegular Leaden" style="font-size:3rem;">$15<span class="Fs30 Leaden">/mo*</span></div>
                                <div class="Container100 FontPoppinsRegular Leaden Fs16">Business class customer <br />support + One to one help</div>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="Separator"/>
                                <div class="Container100 FontPoppinsRegular Leaden Fs16">$155 for monthly</div>
                                <div class="Container100 ui-fluid">
                                    <p:button value="Get Started" outcome="/promotion-page.xhtml" styleClass="GreenButton Fleft"/>
                                </div>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                            </div>
                        </div>

                        <div class="Container25 TexAlCenter Responsive50 Flex">
                            <div class="Card Zoom1point05x">
                                <div class="Container100 FontPoppinsSemiBold Leaden" style="font-size:1.4rem;">Business Plus</div>
                                <div class="Separator"/>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="Container100 FontPoppinsRegular Leaden" style="font-size:3rem;">$50<span class="Fs30 Leaden">/mo*</span></div>
                                <div class="Container100 FontPoppinsRegular Leaden Fs16">Business class customer <br />support + One to one help</div>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                                <div class="Separator"/>
                                <div class="Container100 FontPoppinsRegular Leaden Fs16">$555 for monthly</div>
                                <div class="Container100 ui-fluid">
                                    <p:button value="Get Started" outcome="/promotion-page.xhtml" styleClass="GreenButton Fleft"/>
                                </div>
                                <div class="Wid100 OvHidden" style="height:2rem;"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="Container100 NoIndent RedBack" id="info" style="padding:7rem 3rem;">
                    <h1 class="FontEnriquetaRegular Fs30 White TexAlCenter">Try Now !</h1>
                    <div class="EmptyBox20"/>
                    <div class="Wid90 OvHidden MarAuto">
                        <div class="Container100">
                            <div class="Wid60 WidAutoOnMobile MarAuto White Fs18 TexAlCenter FontPoppinsLight">Create your free account to get access to historical ranks and reviews
                                To check out just top charts and daily ranks, go to Store Stats now !
                                <div class="EmptyBox20"/>
                                <p:commandButton type="button" value="Create Free Account" styleClass="GreenButton"/>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Content End-->

                <div class="Container100 NoIndent WhiteBack">
                    <ui:include src="/WEB-INF/footer.xhtml"/>
                </div>

            </div>
        </div>
    </h:body>
</html>